<template>
	<!-- 展示区域 -->
	<div class="contact">
		<div class="body-left-bg animate__animated animate__fadeInLeft"></div>
		<div class="body-right-bg animate__animated animate__fadeInRight"></div>

		<div class="body">
			<div class="body-left animate__animated animate__fadeInLeft">
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							作业量
						</div>
						<div class="item-tabs">
							<el-radio-group v-model="body1.type" size="large" @change="getChartOption1()">
								<el-radio-button label="年" value="1" />
								<el-radio-button label="月" value="2" />
							</el-radio-group>
						</div>
					</div>
					<div class="item-body">
						<div ref="chartRef1" class="chart"></div>
					</div>
				</div>
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							收入
						</div>
						<div class="item-tabs">
							<el-radio-group v-model="body2.type" size="large" @change="getChartOption2()">
								<el-radio-button label="年" value="1" />
								<el-radio-button label="月" value="2" />
							</el-radio-group>
						</div>
					</div>
					<div class="item-body">
						<div ref="chartRef2" class="chart"></div>
					</div>
				</div>
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							油水电
						</div>
						<div class="item-tabs">
							<el-radio-group v-model="body3.type" size="large" @change="getChartOption3()">
								<el-radio-button label="年" value="1" />
								<el-radio-button label="月" value="2" />
							</el-radio-group>
						</div>
					</div>
					<div class="item-body">
						<div ref="chartRef3" class="chart"></div>
					</div>
				</div>
			</div>
			<div class="body-center animate__animated animate__fadeInUp">
				<div class="center-table">
					<div class="item-top">
						<div class="item-title">
							作业记录
						</div>
						<!-- <div class="item-tabs">
							<el-radio-group v-model="body4.type" size="large" @change="getList4">
								<el-radio-button label="年" value="1" />
								<el-radio-button label="月" value="2" />
							</el-radio-group>
							<el-date-picker v-if="body4.type == '2'" @change="getList4" style="margin-left: 10px;" v-model="body4.month" type="month" placeholder="月份" :clearable="false" />
						</div> -->
					</div>
					<div class="item-body">
						<el-table ref="table1" class="table-style" :data="body4.totalData"
							:header-cell-style="{ background: 'transparent'}" style="height: 100%;">
							<el-table-column prop="tugNo" label="拖轮名称" min-width="9%" align="center" />
							<el-table-column prop="workItemName" label="作业项目" min-width="9%" align="center" />
							<el-table-column prop="beginTime" label="开始时间" min-width="16%" align="center" />
							<el-table-column prop="endTime" label="结束时间" min-width="16%" align="center" />
							<el-table-column prop="portAreaName" label="作业港区" min-width="9%" align="center" />
							<el-table-column prop="customerName" label="客户名称" min-width="9%" align="center" />
						</el-table>
					</div>
				</div>
			</div>
			<div class="body-right animate__animated animate__fadeInRight">
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							拖轮介绍
						</div>
					</div>
					<div class="item-body">
						<div class="tug-item" v-for="(item,index) in body5.tugList" :key="index">
							<div class="tug-title">
								{{item.tugNo}}
							</div>
							<div class="tug-remark">
								{{item.remark}}
							</div>
							<div class="tug-nums">
								<count-to :startVal="0" separator="" :endVal="item.workNum" :decimals="0"
									:duration="2000"></count-to>
							</div>
						</div>
					</div>
				</div>
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							拖轮作业货种
						</div>
						<div class="item-tabs">
							<el-radio-group v-model="body6.type" size="large" @change="getList6">
								<el-radio-button label="年" value="1" />
								<el-radio-button label="月" value="2" />
							</el-radio-group>
							<el-date-picker v-if="body6.type == '2'" @change="getList6" style="margin-left: 10px;"
								v-model="body6.month" type="month" value-format="YYYY-MM" placeholder="月份" :clearable="false" />
						</div>
					</div>
					<div class="item-body">
						<!-- <el-table ref="table2" class="table-style" :data="body6.totalData"
							:header-cell-style="{ background: 'transparent'}" style="height: 100%;">
							<el-table-column prop="CARGO_NAME" label="名称" />
							<el-table-column prop="num" label="数量" />
						</el-table> -->
						<div style="display: flex;align-items: center;height: 100%;width: 100%;">
							<div ref="chartRef4" class="chart"></div>
							<div ref="chartRef5" class="chart"></div>
						</div>
					</div>
				</div>
				<div class="body-item">
					<div class="item-top">
						<div class="item-title">
							人员证书
						</div>
					</div>
					<div class="item-body">
						<el-table ref="table3" class="table-style" :data="body7.totalData"
							:header-cell-style="{ background: 'transparent'}" style="height: 100%;">
							<el-table-column prop="certName" label="证书名称" min-width="9%" />
							<el-table-column prop="certTypeName" label="证书类别" min-width="9%" />
							<!-- <el-table-column prop="crewName" label="所属员工" min-width="9%" /> -->
							<el-table-column prop="beginDate" label="起始日期" min-width="9%" />
							<el-table-column prop="endDate" label="截止日期" min-width="9%" />
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import 'animate.css';
	import {
		CountTo
	} from 'vue3-count-to';
	import * as echarts from 'echarts'

	import {
		ref,
		onUnmounted,
		onMounted,
		nextTick,
		markRaw
	} from "vue";
	import {
		ElMessage,
		ElMessageBox,
		ElNotification
	} from "element-plus";
	import store from '@/store'
	import router from '@/router'
	import {
		getNowDate
	} from '@/utils'

	import api from '@/api/screen'

	const table1 = ref();
	const table2 = ref();
	const table3 = ref();
	const chartRef1 = ref();
	const chart1 = ref();
	const chartOption1 = ref({
		grid: {
			top: '10%',
			left: '2%',
			right: '2%',
			bottom: '5%',
			height: '85%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			icon: 'roundRect',
			itemWidth: 10,
			itemHeight: 10,
			textStyle: {
				color: '#fff',
				fontSize: 12
			}
		},
		xAxis: {
			type: 'category',
			data: [],
			axisLine: {
				lineStyle: {
					color: "#fff"
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#fff'
			}
		},
		yAxis: {
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: '#fff',
					type: 'dashed'
				}
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: "#fff"
				}
			},
			axisLabel: {
				formatter: "{value}",
				color: '#fff',
				fontSize: 12
			},
			nameTextStyle: {
				color: '#fff',
				padding: [0, 0, 0, 15],
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		},
		series: [{
				data: [],
				type: 'bar',
				stack: 'a',
				name: '常规作业记录',
				color: '#3b75d2',
				barWidth: '20px'
			},
			{
				data: [],
				type: 'bar',
				stack: 'a',
				name: '特殊作业记录',
				color: '#e19053',
				barWidth: '20px',
				itemStyle: {
					normal: {
						// 设置圆角，这里以左上角和右上角为例，右下角和左下角为0  
						barBorderRadius: [100, 100, 0, 0]
					}
				}
			},
		]
	});
	const chartRef2 = ref();
	const chart2 = ref();
	const chartOption2 = ref({
		grid: {
			top: '10%',
			left: '2%',
			right: '2%',
			bottom: '5%',
			height: '85%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			textStyle: {
				color: '#fff',
				fontSize: 12
			}
		},
		xAxis: [{
			data: [],
			axisLine: {
				lineStyle: {
					color: "#fff"
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#fff'
			}
		}],
		yAxis: [{
				type: 'value',
				splitLine: {
					show: false,
					lineStyle: {
						color: '#fff',
						type: 'dashed'
					}
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: "#fff"
					}
				},
				axisLabel: {
					formatter: "{value}",
					color: '#fff',
					fontSize: 12
				},
				nameTextStyle: {
					color: '#fff',
					padding: [0, 0, 0, 15],
					fontSize: 12
				},
				axisTick: {
					show: false
				}
			},
			{
				type: 'value',
				splitLine: {
					show: true,
					lineStyle: {
						color: '#fff',
						type: 'dashed'
					}
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: "#fff"
					}
				},
				axisLabel: {
					formatter: "{value}",
					color: '#fff',
					fontSize: 12
				},
				nameTextStyle: {
					color: '#fff',
					padding: [0, 0, 0, 15],
					fontSize: 12
				},
				axisTick: {
					show: false
				}
			}
		],
		series: [{
				name: '常规作业收入',
				type: 'bar',
				data: [],
				barWidth: '20px',
				itemStyle: {
					normal: {
						// 设置圆角，这里以左上角和右上角为例，右下角和左下角为0  
						barBorderRadius: [100, 100, 0, 0]
					}
				}
			},
			{
				name: '特殊作业收入',
				type: 'line',
				yAxisIndex: 1,
				data: []
			}
		]
	});
	const chartRef3 = ref();
	const chart3 = ref();
	const chartOption3 = ref({

		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		grid: {
			top: '10%',
			left: '2%',
			right: '2%',
			bottom: '5%',
			height: '85%',
			containLabel: true
		},
		legend: {
			textStyle: {
				color: '#fff',
				fontSize: 12
			}
		},
		xAxis: {
			data: [],
			axisLine: {
				lineStyle: {
					color: "#fff"
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#fff'
			}
		},
		yAxis: [{
			name: '',
			type: "value",
			inverse: false,
			splitLine: {
				show: true,
				lineStyle: {
					color: '#fff',
					type: 'dashed'
				}
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: "#fff"
				}
			},
			axisLabel: {
				formatter: "{value}",
				color: '#fff',
				fontSize: 12
			},
			nameTextStyle: {
				color: '#fff',
				padding: [0, 0, 0, 15],
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		}],
		series: [{
				name: "油耗",
				type: "line",
				symbol: 'circle',
				showAllSymbol: true,
				// symbolSize: 0,
				smooth: true,
				itemStyle: {
					color: `rgba(235, 86, 125, 1)`,
					lineStyle: {
						color: `rgba(235, 86, 125, 1)`,
						width: 1.5
					},
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(235, 86, 125, 0.9)'
						}, {
							offset: 1,
							color: 'rgba(235, 86, 125, 0.3)'
						}]
					}
				},
				data: []
			},
			{
				name: "电耗",
				type: "line",
				symbol: 'circle',
				showAllSymbol: true,
				// symbolSize: 0,
				smooth: true,
				itemStyle: {
					color: `#FFDF04`,
					lineStyle: {
						color: `#FFDF04`,
						width: 1.5
					},
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(250, 224, 76, 0.9)'
						}, {
							offset: 1,
							color: 'rgba(250, 224, 76, 0.1)'
						}]
					}
				},
				data: []
			},
			{
				name: "水耗",
				type: "line",
				symbol: 'circle',
				showAllSymbol: true,
				// symbolSize: 0,
				smooth: true,
				itemStyle: {
					color: `#55b678`,
					lineStyle: {
						color: `#55b678`,
						width: 1.5
					},
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(85, 182, 120, 0.9)'
						}, {
							offset: 1,
							color: 'rgba(85, 182, 120, 0.1)'
						}]
					}
				},
				data: []
			},
			/* {
				name: "行驶里程",
				type: "line",
				symbol: 'circle',
				showAllSymbol: true,
				symbolSize: 0,
				smooth: true,
				itemStyle: {
					color: `rgba(74, 116, 204, 1)`,
					lineStyle: {
						color: `rgba(74, 116, 204, 1)`,
						width: 1.5
					},
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(74, 116, 204, 0.9)'
						}, {
							offset: 1,
							color: 'rgba(74, 116, 204, 0.1)'
						}]
					}
				},
				data: []
			} */
			// 如有更多系列，请按照同样方式添加
		]

	});


	const chartRef4 = ref();
	const chart4 = ref();
	const chartOption4 = ref({
		color: [
			"#3b75d2",
			"#ef8b45",
			"#1eb9d1",
			"#ffde34",
			"#11B972",
			"#829eec"
		],
		tooltip: {
			trigger: 'item'
		},
		grid: {
			bottom: 150,
		},
		legend: {
			type: 'scroll',
			orient: "vertical",
			top: "middle",
			right: "0%",
			textStyle: {
				fontSize: 12,
				color:'#fff'
			},
			icon: "roundRect",
			data: [],
			pageButtonItemGap: 10, // 按钮和页信息之间的间隔
			pageButtonGap: 10, // 控制块和图例项之间的间隔
			pageIconInactiveColor: 'orange', // 按钮未激活颜色
			pageIconColor: 'red', // 按钮颜色
			pageIconSize: [15, 30], // 翻页按钮的大小 [宽, 高]
			pageTextStyle: {
				color: '#fff',
				fontSize: 16
			}
		},
		series: [{
				radius: ["30%", "61%"],
				center: ["33%", "50%"],
				type: "pie",
				label: {
					show: false,
					formatter: "{c}%",
					fontSize: 12, // 将 fontSize 直接放在 label 下
					position: "outside"
				},
				emphasis: { // 将 emphasis 放在 label 外面
					label: {
						show: false
					}
				},
				labelLine: {
					show: false,
					length: 10,
					length2: 15
				},
				name: "",
				data: []
			},
			{
				emphasis: {
					disabled: false,
					scale: false,
				},
				radius: ["30%", "34%"],
				center: ["33%", "50%"],
				type: "pie",
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					itemStyle: {
						color: "rgba(250,250,250,0.3)"
					}
				}]
			},
			{
				emphasis: {
					disabled: false,
					scale: false,
				},
				name: "外边框",
				type: "pie",
				clockwise: false,
				scale: false,
				center: ["33%", "50%"],
				radius: ["65%", "65%"],
				label: {
					show: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 9,
					name: "",
					itemStyle: {
						borderWidth: 2,
						borderColor: "#ccc"
					}
				}]
			}
		]
	});
	const chartRef5 = ref();
	const chart5 = ref();
	const chartOption5 = ref({
		color: [
			"#3b75d2",
			"#ef8b45",
			"#1eb9d1",
			"#ffde34",
			"#11B972",
			"#829eec"
		],
		tooltip: {
			trigger: 'item'
		},
		grid: {
			bottom: 150,
		},
		legend: {
			orient: "vertical",
			top: "middle",
			right: "0%",
			textStyle: {
				fontSize: 12,
				color:'#fff'
			},
			icon: "roundRect",
			data: []
		},
		series: [{
				radius: ["30%", "61%"],
				center: ["33%", "50%"],
				type: "pie",
				label: {
					show: false,
					formatter: "{c}%",
					fontSize: 12, // 将 fontSize 直接放在 label 下
					position: "outside"
				},
				emphasis: { // 将 emphasis 放在 label 外面
					label: {
						show: false
					}
				},
				labelLine: {
					show: false,
					length: 10,
					length2: 15
				},
				name: "",
				data: []
			},
			{
				emphasis: {
					disabled: false,
					scale: false,
				},
				radius: ["30%", "34%"],
				center: ["33%", "50%"],
				type: "pie",
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					itemStyle: {
						color: "rgba(250,250,250,0.3)"
					}
				}]
			},
			{
				emphasis: {
					disabled: false,
					scale: false,
				},
				name: "外边框",
				type: "pie",
				clockwise: false,
				scale: false,
				center: ["33%", "50%"],
				radius: ["65%", "65%"],
				label: {
					show: false
				},
				tooltip: {
					show: false
				},
				data: [{
					value: 9,
					name: "",
					itemStyle: {
						borderWidth: 2,
						borderColor: "#ccc"
					}
				}]
			}
		]
	});


	const body1 = ref({
		type: '2'
	})
	const body2 = ref({
		type: '2'
	})
	const body3 = ref({
		type: '2'
	})
	const body4 = ref({
		totalData: [],
		scrollTimer: {}
	})
	const body5 = ref({
		tugList: []
	})
	const body6 = ref({
		type: '1',
		month: getNowDate('YYYY-MM'),
		totalData: [],
		scrollTimer: {}
	})
	const body7 = ref({
		totalData: [],
		scrollTimer: {}
	})
	const tugList = ref([{
			tugNo: '拖轮1',
			nums: 1023
		},
		{
			tugNo: '拖轮1',
			nums: 1023
		}
	])
	const totalData = ref({
		recordData: [],
		typeData: [],
		certData: []
	})

	onMounted(() => {
		initChart()
		nextTick(() => {
			// scroll(table1.value.$refs.bodyWrapper); //设置滚动
			// scroll(table2.value,body6.value.scrollTimer); //设置滚动
			// scroll(table3.value,body7.value.scrollTimer); //设置滚动
		})
	})
	const initChart = () => {
		chart1.value = markRaw(echarts.init(chartRef1.value))
		window.addEventListener("resize", function() {
			chart1.value.resize();
		});
		chart2.value = markRaw(echarts.init(chartRef2.value))
		window.addEventListener("resize", function() {
			chart2.value.resize();
		});
		chart3.value = markRaw(echarts.init(chartRef3.value))
		window.addEventListener("resize", function() {
			chart3.value.resize();
		});
		chart4.value = markRaw(echarts.init(chartRef4.value))
		window.addEventListener("resize", function() {
			chart4.value.resize();
		});
		chart5.value = markRaw(echarts.init(chartRef5.value))
		window.addEventListener("resize", function() {
			chart5.value.resize();
		});
		getChartOption1()
		getChartOption2()
		getChartOption3()
		// getChartOption4()
		// getChartOption5()
		getList4()
		getList5()
		getList6()
		getList7()
	}
	const getChartOption1 = () => {
		//作业量
		api.getWorkNum({
			planDte: body1.value.type == '1' ? '' : new Date().getFullYear() + ''
		}).then(res => {
			chartOption1.value.xAxis.data = res.data.map(v => body1.value.type == '1' ? v.reportYear : v
				.reportMonth);
			chartOption1.value.series[0].data = res.data.map(v => v.common)
			chartOption1.value.series[1].data = res.data.map(v => v.special)
		}).then(_ => {
			chart1.value.setOption(chartOption1.value)
		})
	}
	const getChartOption2 = () => {
		//作业金额
		api.getFeeList({
			planDte: body2.value.type == '1' ? '' : new Date().getFullYear() + ''
		}).then(res => {
			chartOption2.value.xAxis[0].data = res.data.map(v => body2.value.type == '1' ? v.reportYear : v
				.reportMonth);
			chartOption2.value.series[0].data = res.data.map(v => v.common)
			chartOption2.value.series[1].data = res.data.map(v => v.special)
		}).then(_ => {
			chart2.value.setOption(chartOption2.value)
		})
	}
	const getChartOption3 = () => {
		//作业能耗
		api.getConsumeTmsMTug({
			planDte: body3.value.type == '1' ? '' : new Date().getFullYear() + ''
		}).then(res => {
			chartOption3.value.xAxis.data = res.data.map(v => body3.value.type == '1' ? v.TYEAR : v
				.reportMonth);
			chartOption3.value.series[0].data = res.data.map(v => v.sumOriCost)
			chartOption3.value.series[1].data = res.data.map(v => v.sumPowerCost)
			chartOption3.value.series[2].data = res.data.map(v => v.sumWaterCost)
			// chartOption3.value.series[3].data = res.data.map(v => v.special)
		}).then(_ => {
			chart3.value.setOption(chartOption3.value)
		})
	}
	const getChartOption4 = () => {
		var list = []
		//作业能耗
		api.getTmsMTugCargo({
			planDte: body6.value.type == '1' ? '' : body6.value.month
		}).then(res => {
			if(res.data&&res.data.length > 0){
				res.data.forEach(v=>{
					list.push({value:v.num,name:v.CARGO_NAME})
				})
			}
			chartOption4.value.legend.data = res.data.map(v => v.CARGO_NAME);
		}).then(_ => {
			chartOption4.value.series[0].data = list
			chart4.value.setOption(chartOption4.value)
		})
	}
	const getChartOption5 = () => {
		var list = []
		//作业能耗
		api.getTmsMTugCorp({
			planDte: body6.value.type == '1' ? '' : body6.value.month
		}).then(res => {
			if(res.data&&res.data.length > 0){
				res.data.forEach(v=>{
					list.push({value:v.num,name:v.CORP})
				})
			}
			chartOption5.value.legend.data = res.data.map(v => v.CORP);
		}).then(_ => {
			chartOption5.value.series[0].data = list
			chart5.value.setOption(chartOption5.value)
		})
	}
	const getList4 = () => {
		//作业情况
		api.getTmsMTugWork().then(res => {
			body4.value.totalData = res.data
		}).then(_ => {})
	}
	const getList5 = () => {
		//拖轮情况
		api.getTmsMTug().then(res => {
			body5.value.tugList = res.data.slice(0, 2)
		})
	}
	const getList6 = () => {
		getChartOption4()
		getChartOption5()

	}
	const getList7 = () => {
		//船员证书
		api.getTmsCrewCert({
			planDte: body3.value.type == '1' ? '' : new Date().getFullYear() + ''
		}).then(res => {
			body7.value.totalData = res.data
		}).then(_ => {})
	}
	// const scrollTimer = ref()
	const scroll = (tableBody) => {
		var isScroll = true;
		var tableWrapper = tableBody.getElementsByClassName("el-scrollbar__wrap")[0]
		console.log(tableWrapper);

		//鼠标放上去，停止滚动；移开，继续滚动
		tableWrapper.addEventListener('mouseover', () => {
			isScroll = false
		})
		tableWrapper.addEventListener('mouseout', () => {
			isScroll = true
		})
		body4.value.scrollTimer = setInterval(() => {
			// console.log(tableWrapper.scrollTop);
			if (isScroll) {
				tableWrapper.scrollTop += 1
				// 到达最后一行时从第一条继续
				if ((tableWrapper.clientHeight + tableWrapper.scrollTop) >= tableWrapper.scrollHeight) {
					tableWrapper.scrollTop = 0
				}
				// clearInterval(body4.value.scrollTimer)
				// body4.value.scrollTimer = null
			}
		}, 100)
	};
</script>
<style scoped>
	::v-deep .el-radio-button__inner {
		height: 30px;
		line-height: 30px;
		padding: 0;
		width: 55px;
	}
</style>
<style lang="less" scoped>
	.contact {
		width: 100%;
		height: 92%;
		overflow: hidden;
		position: relative;
		padding: 0 24px 24px;
	}

	.body {
		display: flex;
		position: absolute;
		z-index: 2;
		width: calc(100% - 48px);
		height: 100%;
	}

	.body-left-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 50%;
		height: 100%;
		background: linear-gradient(to right, #1c4154 0%, rgba(28, 65, 84, 0.4) 52%, rgba(29, 73, 96, 0) 68%, rgba(29, 73, 96, 0) 100%);
	}

	.body-right-bg {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		width: 50%;
		height: 100%;
		background: linear-gradient(to left, #1c4154 0%, rgba(28, 65, 84, 0.4) 52%, rgba(29, 73, 96, 0) 68%, rgba(29, 73, 96, 0) 100%);
	}

	.chart {
		width: 100%;
		height: 100%;
	}

	.body-left {
		width: 30%;
		height: calc(100% - 24px);
	}

	.body-item {
		width: 100%;
		height: calc(33.33% - 12px);
		margin-top: 12px;
		padding: 4px 16px;
		background-image: url(@/assets/img02/bg06.png);
		background-size: 100% 100%;
	}

	.item-top {
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #ffffff;
		font-size: 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-title {
		width: 40%;
		height: 100%;
		padding: 0 8px;
		background-image: url(@/assets/img01/title01.png);
		background-size: 100% 100%;
	}

	.item-tabs {
		flex: 1;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.item-body {
		width: 100%;
		height: calc(100% - 30px);
		display: flex;
	}

	.body-center {
		width: calc(40% - 32px);
		margin: 0 16px;
		position: relative;
	}

	.center-table {
		position: absolute;
		padding: 0 16px;
		bottom: 24px;
		width: 100%;
		height: calc(25% + 12px);
		padding: 4px 16px;
		background-image: url(@/assets/img02/bg25.png);
		background-size: 100% 100%;
	}

	.body-right {
		width: 30%;
		height: calc(100% - 24px);
	}

	.table-style {
		margin-top: 5px;
	}

	.tug-item {
		margin-top: 10px;
		flex: 1;
		padding-right: 12px;
		background: linear-gradient(180.00deg, rgb(255, 255, 255), rgb(136, 249, 255));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		font-family: Agency FB;
	}

	.tug-item:nth-child(2n) {
		padding-right: 0;
		padding-left: 12px;
	}

	.tug-title {
		width: 80%;
		margin-left: 10%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		background-image: url(@/assets/img02/bg01.png);
		background-size: 100% 100%;
	}

	.tug-remark {
		padding: 5px 25px;
		height: 50px;
		color: #fff;
		-webkit-text-fill-color: #fff;
	}

	.tug-nums {
		width: 100%;
		margin-top: 10px;
		height: calc(100% - 110px);
		text-align: center;
		line-height: 120px;
		font-size: 50px;
		font-weight: bold;
		// background-image: url(@/assets/img/bg02.png);
		// background-size: 100% 100%;
	}
</style>
<style scoped>
	span {
		font-size: 40px;
		font-family: Agency FB;
	}

	.el-table--fit {
		background: transparent;
	}

	.elispice {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		width: 100%;
	}

	::v-deep thead tr {
		background: rgba(0, 0, 0, 0.12);
	}

	::v-deep tbody tr {
		background: transparent;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background: rgba(0, 0, 0, 0.2);
	}

	::v-deep .el-table th {
		border-bottom: 2px solid #00f0ff;
	}

	::v-deep .cell {
		color: #fff;
	}

	::v-deep .el-table__empty-text {
		color: #fff;
	}

	.el-table__inner-wrapper:before {
		background-color: transparent;
	}

	::v-deep .el-table th.el-table__cell.is-leaf {
		border-bottom: 2px solid #00f0ff;
	}

	::v-deep .el-table td.el-table__cell {
		border-bottom: 0 !important;
	}

	.el-table__body tr:hover>td {
		background-color: rgba(0, 0, 0, 0.2) !important;
	}

	::v-deep .el-input__wrapper {
		flex-grow: 0;
		height: 30px;
		width: 100px;
	}

	::v-deep .el-date-editor.el-input {
		width: 100px;
	}
</style>